<template>
  <div class="count-down" v-html="surplusTime"></div>
</template>
<script>
import { countDown } from '@/utils'

export default {
  props: {
    TipsText: {
      type: String
    },
    surplusTips: {
      type: String
    },
    surplusDate: {
      type: Number
    }
  },
  data() {
    return {
      surplusTime: '',
      countInter: null
    }
  },
  computed: {
  },
  created() {
    this.countInter = setInterval(() => {
      this.initSurplusTime()
    }, 1000);
  },
  methods: {
    initSurplusTime() {
      let t = countDown(this.surplusDate);
      if (t) {
        this.surplusTime = `还剩${t}${this.TipsText}`
      } else {
        clearInterval(this.countInter)
        this.$emit('timeout')
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.count-down {
  text-align: center;
}
.count {
  color: #ff1e3e;
}
</style>
